<template>
    <div>
         <header>
            <a href="javascript:history.back(-1)"><img class="back" src="@/assets/imgs/icon_back.png" alt=""></a>
            <span>注册</span>
            <router-link to='login'>
            <p>登录</p>
            </router-link>
     </header>
     <section style='padding:"0 .625rem"'>
         <div class="logo">
             <img src="@/assets/imgs/migu-music.png" alt="">
         </div>
         <div class="form">
             <input class='user' type="text" placeholder="手机号" maxlength="11" datatype='phone' bullmsg='手机号码不能为空' errormsg='手机号码输入不正确'> 
             <input class='pwd' type="password" placeholder="请输入密码">
             <button>立即注册</button>
         </div>
     </section>
<div class="footer">您可以使用该帐号登录咪咕音乐、咪咕视频、咪咕阅读、咪咕游戏、咪咕圈圈等业务。中国移动用户已默认注册和通行证帐号，可直接登录咪咕业务。</div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
header {
    width: 100%;
    height: 1rem;
    position: relative;
    line-height: 1rem;
    color: #333;
    background: #fff;
    font-size: .38rem;
    text-align: center;
    overflow: hidden;
    .back {
        position: absolute;
        left: .1rem;
        top: 50%;
        width: .24rem;
        margin: -.15rem 0 .1rem .3rem;
    }
    p{
        float: right;
        font-size: .28rem;
        margin-right: .3rem;
    }
}
.logo{
     width: 100%;
    height: 1.8rem;
    box-sizing: border-box;
    padding: .2rem 0;  
    margin-bottom: .2rem;
    img{
        width: 2.85rem;
        height: .7rem;
        margin-left: 2.3rem;
    }
}
.form{
    padding: 0 .625rem;
    input{
      width: 6.464rem;
      height: 1rem;
      font-size: .3rem;
      padding: 0 .2rem;
      color: #DBDDDF; 
      border-bottom: 1px solid #DBDDDF; 
      margin-bottom: .5rem;
      
    }
    button{
        margin: 0 auto;
       width: 6rem;
       height: .88rem;
       border-radius:.44rem;
       display:block;
       background-color:#e30077;;
       color: #fff;
       text-align: center;
       line-height: .88rem;
       font-size: .35rem;
    }
  
}
.footer{
    margin-top: 4rem;
    font-size: .3rem;
    color: #B0B3B5;
    // line-height: 1.5;
    padding: 0 .5rem .5rem;
    text-align: left; 
}
</style>
